<template>
  <div class="box">
    <div>
      <p class="title">
        免费好课<span class="tips"></span>
        <router-link to="" @click.native="toMoreList">更多&gt;</router-link>
      </p>
      <!-- 免费好课区域 -->
      <div class="zbcourse">
        <div v-for="(item, index) in courseList" :key="index" class="scaleDiv">
          <router-link to="" @click.native="goTo(item.id)"
            ><img v-lazy="item.image" alt="" />
            <span>
              {{ formatSeconds(item.times) }}
            </span>
          </router-link>
          <span>
            <p class="title-intro">{{ item.name }}</p>
            <p class="content">
              {{ item.content }}
            </p>
            <p class="pdl20">{{ item.num }}人已学</p>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/config/api'
import { sendPost } from '@/utils/http'
export default {
  data () {
    return {
      courseList: []
    }
  },
  methods: {
    getCourseList () {
      sendPost(api.getFreeCourseList, { courseId: '0', offset: 0, limit: 4 }).then(res => {
        // console.log(res.data);
        this.courseList = res.data
      })
    },
    goTo (id) {
      console.log(id);
      this.$router.push('/ptebase?id=' + id)
    },
    formatSeconds (value) {
      var theTime = parseInt(value);// 秒
      var theTime1 = 0;// 分
      if (theTime > 60) {
        theTime1 = parseInt(theTime / 60);
        theTime = parseInt(theTime % 60);

        if (theTime < 10) {
          return theTime1 + ':' + '0' + theTime
        } else {
          return theTime1 + ':' + theTime
        }
      }
      else {
        if (theTime < 10) {
          return '00:' + '0' + theTime
        } else {
          return '00:' + theTime
        }
      }
    },
    toMoreList () {
      this.$router.push('basecourselist?courseId=0&type=free&listName=免费好课')

    }

  },
  created () {
    this.getCourseList()
  },

}
</script>

<style lang="less" scoped>
.box {
  background-color: #eff1f4;
  padding-bottom: 3.125rem;
}
.title {
  display: flex;
  width: 75rem;
  margin: auto;
  font-size: 2.5rem;
  height: 6.25rem;
  text-align: left;
  justify-content: space-between;
  line-height: 6.25rem;
  position: relative;
  a {
    text-decoration: none;
    color: #989799;
    font-size: 1rem;
    cursor: pointer;
  }

  .tips {
    position: absolute;
    left: 14.5rem;
    font-size: 1.125rem;
    color: #999;
  }
}
.scaleDiv:hover {
  transform: translateY(0.3125rem);
  box-shadow: 0 0 20px 2px #918f8f; /*盒子阴影*/
}
.zbcourse {
  width: 75rem;
  margin: auto;
  display: flex;
  box-sizing: border-box;
  :nth-child(4n) {
    margin-right: 0;
  }
  div {
    transition: all 0.3s;
    width: 17.4375rem;
    height: 17.875rem;
    background-color: #fff;
    margin-right: 1.6875rem;
    text-align: left;
  }
  a {
    display: flex;
    width: 100%;
    height: 10.1875rem;
    background-color: #d9d9d9;
    position: relative;
    span {
      position: absolute;
      bottom: 0.625rem;
      right: 0.625rem;
      width: 3rem;
      border-radius: 0.25rem;
      line-height: 1.5rem;
      background-color: #828282;
      text-align: center;
      color: #fff;
      opacity: 0.5;
    }
    img {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
.title-intro {
  font-size: 1.25rem;
  height: 3.4375rem;
  line-height: 3.4375rem;
  color: #666;
  font-weight: 400;
  padding: 0 1.25rem;
  box-sizing: border-box;
}
.content {
  font-size: 0.875rem;
  color: #999;
  padding: 0 1.25rem;
  height: 2.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: wrap;
}
.pdl20 {
  font-size: 0.875rem;
  color: #999;
  padding: 0 1.25rem;
  text-align: right;
}
</style>
